<style>
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
      font-size: 18px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
<template>
    <div class="page-container">
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters" class="form">
            <el-form-item>
                <el-input v-model="filters.orderNo" placeholder="订单编号"></el-input>
            </el-form-item>
              <el-form-item>
                <el-input v-model="filters.number" placeholder="支付编号"></el-input>
              </el-form-item>
            <el-form-item>
                <el-input v-model="filters.buyName" placeholder="购买人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="filters.productName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item prop="time">
                <el-date-picker
                    v-model="filters.startTime"
                    type="date"
                    :editable="false"
                    prefix-icon="el-icon-caret-bottom"
                    value-format="yyyy-MM-dd"
                    :clearable='false'
                    placeholder="支付创建时间始">
                </el-date-picker>
                <span style="padding: 0 3px">--</span>
                <el-date-picker
                    v-model="filters.endTime"
                    type="date"
                    :editable="false"
                    prefix-icon="el-icon-caret-bottom"
                    value-format="yyyy-MM-dd"
                    :clearable='false'
                    placeholder="支付创建时间末">
                </el-date-picker>
            </el-form-item>

            <el-form-item prop="shopid">
                <el-select v-model="filters.shopid" placeholder="所属店铺">
                    <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
                <el-row>
                    <el-form-item>
                        <kt-button icon="fa fa-search" label="查询" type="primary" @click="queryInfo" />
                    </el-form-item>
                    <el-form-item>
                        <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
                    </el-form-item>
                </el-row>
            </el-form>
        </div>

        <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
            <el-form :inline="true" :size="size">
                <el-form-item>
                    <el-button-group>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
                    </el-tooltip>
                    <el-tooltip content="列显示" placement="top">
                        <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                    </el-tooltip>
                <el-tooltip content="导出" placement="top">
                    <el-button icon="fa fa-file-excel-o"  @click="downloadExcel" id="downloadExcel"></el-button>
                    </el-tooltip>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <!--表格显示列界面-->
            <table-column-filter-dialog ref="tableColumnFilterDialog" 	@handleFilterColumns="handleFilterColumns" :columns="columns">

            </table-column-filter-dialog>
        </div>
        <!--表格内容栏-->
        <cy-table
            :height="350"
            :data="pageResult"
            :columns="filterColumns"
            :showOperation="false"
            :showEditOperation="false"
            :showDeleteOperation="false"
            :showBatchDelete="false"
            @findPage="findPage"
            @selectionChange="selectionChange"
            ref="CyTable"
        ></cy-table>
    </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import CyTable from "@/views/Core/CyTable";
export default {
    components: {
    PopupTreeInput,
    KtTable,
    CyTable,
    KtButton,
    TableColumnFilterDialog
    },
    data() {
        return {
            size: "small",
            loading: false,
            dialogVisibleImage: false,
            filters: {
                t: "payOrder",
                title:"",
                status:"",
                shopid:"",
                productName:"",
              buyName:"",
              orderNo:""
            },
            shopList: [],
            columns: [],
            filterColumns: [],
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageResult: {},
            checked: [],
            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            checkpage: false,
            deptData: [],
            deptTreeProps: {
            label: "name",
            children: "children"
            },
            roles: []
        };
    },
    methods: {
        findPage: function(data) {
            this.filters.t = "payOrder";
            this.$refs.CyTable.findPage(this.filters);
        },

        //初始化数据
        init() {
            let that = this;
            //查询所有店铺
            this.utils.request.queryShop({}, res => {
            that.shopList = res.data;
            })
        },

        //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'payOrder'
          }).then(() => { 
            let filename="支付单流水"
            this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename);
          }).catch(() => {
          });
        } ,

        // 显示查询
        queryInfo: function() {
            this.findPage(this.filters);
        },

        selectionChange: function(params) {
            console.log(params);
            this.checked = params.selections;
        },

        // 处理表格列过滤显示
        handleFilterColumns: function (data) {
            this.filterColumns = data.filterColumns
            this.$refs.tableColumnFilterDialog.setDialogVisible(false)
        },

        // 处理表格列过滤显示
        displayFilterColumnsDialog: function () {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true)
        },

        // 时间格式化
        dateFormat: function(row, column, cellValue, index) {
            return format(row[column.property]);
        },

        // 处理表格列过滤显示
        initColumns: function() {
            this.columns = [
            { prop: "id", label: "ID", minWidth: 50 },
            { prop: "orderNo", label: "订单号", minWidth: 120 },
            { prop: "number", label: "支付编号", minWidth: 120 },
            { prop: "amount", label: "支付金额", minWidth: 120 },
            { prop: "buyName", label: "购买人", minWidth: 120 },
            { prop: "status", label: "状态", minWidth: 120 },
            { prop: "productName", label: "产品名称", minWidth: 120 },
            { prop: "create_time", label: "创建时间", minWidth: 120 },
            { prop: "creatorName", label: "创建人", minWidth: 120 },
            { prop: "update_time", label: "修改时间", minWidth: 120 },
            { prop: "updatorName", label: "修改人", minWidth: 120 ,}
            ];
            var temp = [];
            $.each(this.columns, function(key, val) {
            temp.push(val);
            });
            this.filterColumns = temp;
        },

        resetForm(formName) {
            (this.filters = {
            t: "payOrder",

            }),
            this.findPage();
        },


    },
    mounted() {
        this.initColumns();
        this.init()
    }
};
</script>

<style scoped>
/deep/ .form .el-input__inner {
    width: 200px !important;
}
</style>
